<template>
    <div id="teacher">
        <div class="container">
            <div class="big_box">
                <div class="teacher_img">
                    <img :src="activeInfo.pic" alt="教师图片 600* 420">
                </div>
                <div class="teacher_txt">
                    <div class="teacher_name">
                        {{ activeInfo.name }}
                    </div>
                    <div class="teacher_data">
                        {{ activeInfo.title }}
                    </div>
                    <div class="teacher_inner">
                        {{ activeInfo.intro }}
                    </div>
                </div>
            </div>
            <!-- 轮播 -->
            <div class="swiperbox">
                <div class="swiper_content">
                    <swiper :options="swiperOption" class=".swiper-container" ref="mySwiper" >
                        <swiper-slide v-for="(item, index) in imglist" :key="index">
                            <div class="imgbox" @click="getImgInfo(item, index)" :class="{'active': act == index}">
                                <div class="t_img">
                                    <img :src="item.pic" alt="教师图片">
                                </div>
                                <div class="t_info">
                                    <div class="t_name">
                                        {{ item.name }}
                                    </div>
                                    <div class="t_txt">
                                         {{ item.title }}
                                    </div>
                                </div>
                            </div>
                        </swiper-slide>
                        <div class="swiper-pagination" slot="pagination"></div>
                        <div class="swiper-button-prev" slot="button-prev"></div>
                        <div class="swiper-button-next" slot="button-next"></div>
                    </swiper>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper';
    
    export default {
        components: {
            swiper,
            swiperSlide,
        },
        data() {
            return {
                swiperOption: {
                    slidesPerView: 4,
                    spaceBetween: 60,
                    autoplay: true,
                    loop: true,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                        freeMode: true,
                        
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },

                    
                },
                imglist: [
               ],
                activeInfo: {},
                act: "0",
                timer: ""

            }
        },
        computed: {

        },
        mounted() {
            this.getTeachers()
        },
        methods: {
            // 自动轮播
            autoPlay() {
                let all = this.imglist.length
                this.timer = setInterval(() => {
                    this.act ++
                    this.activeInfo = this.imglist[this.act]
                    if (this.act == all) {
                        this.act = 0
                        this.activeInfo = this.imglist[0]
                    }
                }, 3000)
            },
            // 获取教师信息
            getImgInfo( item, index ) {
                clearInterval(this.timer)
                console.log(index);
                this.act = index
                this.activeInfo = item
                this.autoPlay()
            },
            // 获取教师
            async getTeachers() {
                let res = await this.$axios.post("/port/index/teacher", { key: this.$key })
                console.log(res);
                this.imglist = res.data.data
                this.activeInfo = this.imglist[0]
                this.autoPlay()
            },
        }
    }
</script>

<style lang="scss" scoped>
.active {
    border:  1px solid #007eff;
    color: #007eff;
}
#teacher {
    width: 100%;
    margin: 0 auto;
    background-color: #f5f5f5;
    .container {
        width: 1200px;
        margin:20px auto;
        padding: 30px 0;
        box-sizing: border-box;
        .big_box {
            width: 100%;
            box-sizing: border-box;
            position: relative;
            left: 0;
            top: 0;
            .teacher_img {
                width: 600px;
                height: 420px;
                border: 1px solid #000;
                overflow: hidden;
                background-color: #f2f2f2;
                img {
                    width: 600px;
                    height: 420px;
                }
            }
            .teacher_txt {
                width: 630px;
                box-sizing: border-box;
                padding: 50px;
                height: 380px;
                position: absolute;
                right: 0;
                bottom: 0;
                background-color: #fff;
                .teacher_name {
                    font-size: 34px;
                    font-weight: bold;
                    height: 50px;
                    line-height: 50px;
                }
                .teacher_data {
                    font-size: 16px;
                    height: 40px;
                    line-height: 40px;
                }
                .teacher_inner {
                    font-size: 20px;
                    padding-top: 50px;
                    // width: 100%;
                    display: -webkit-box;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 5;
                    -webkit-box-orient: vertical;
                }
            }
        }
        .swiperbox {
            width: 100%;
            text-align: center;
            box-sizing: border-box;
            padding: 20px;
            .swiper_content {
                width: 1160px;
                margin: 0 auto;
                .imgbox {
                    width: 240px;
                    // height: 220px;
                    // border: 1px solid #333;
                    .t_img {
                        width: 240px;
                        height: 168px;
                        // border:1px solid #000;
                        overflow: hidden;
                        img {
                            width: 240px;
                            height: 168px;
                        }
                    }
                    .t_info {
                        width: 100%;
                        box-sizing: border-box;
                        display: flex;
                        align-items: flex-end;
                        justify-content: space-between;
                        line-height: 50px;
                        height: 50px;
                        .t_name {
                            font-size: 22px;

                        }
                        .t_txt {
                            font-size: 16px;
                            color: #999;
                        }
                    }
                }
            }
            
        }
    }
}

</style>